<template>
  <!-- 头部 -->
  <div class="header-warp">
    <div class="header clearFix">
      <div class="header-left">
        <div class="site">
          <i class="iconfont icon-dizhi"></i>
          <span>北京[更换]</span>
        </div>
      </div>

      <div class="header-right">
        <ul class="clearFix">
          <li v-if="isLogin" class="nav">
            <a @click="toPersonalCenter"> {{ isLogin }} 用户 </a>
          </li>
          <li v-else class="nav">
            <router-link to="/login"> 你好，请登录 </router-link>
          </li>
          <li v-if="isLogin" class="nav">
            <router-link to="/message"> 消息 </router-link>
          </li>
          <li v-else class="nav">
            <router-link to="/register" class="register">
              免费注册
            </router-link>
          </li>
          <li class="fgx"></li>
          <li class="xlk nav">
            <a @click="toPersonalCenter">
              个人中心
              <i class="iconfont icon-xiangxia1" style="font-size: 10px"></i>
            </a>
            <div>
              <ul>
                <li>我的评价</li>
                <li>我的收藏</li>
                <li>我的评价</li>
                <li>我的收藏</li>
                <li>我的评价</li>
                <li>我的收藏</li>
              </ul>
            </div>
          </li>
          <li class="fgx"></li>
          <li class="xlk nav">
            <a>
              商户服务
              <i class="iconfont icon-xiangxia1" style="font-size: 10px"></i>
            </a>
            <div>
              <ul>
                <li>商户中心</li>
                <li>商户合作</li>
                <li>招募餐饮代理</li>
                <li>招募非餐饮代理</li>
              </ul>
            </div>
          </li>
          <li class="fgx"></li>
          <li class="nav">
            <a>
              帮助中心
              <i class="iconfont icon-xiangxia1"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header_white",
  data() {
    return {};
  },

  methods: {
    //切换个人中心页面(判断用户是否登录)
    toPersonalCenter() {
      const { isLogin } = this;
      if (isLogin) {
        this.$router.push({
          name: "PersonalCenter",
          params: { isLogin },
        });
      } else {
        this.$router.push("/login");
      }
    },
  },

  watch: {
    $route(value) {
      this.$store.dispatch("getCategoryList");
    },
  },

  computed: {
    isLogin() {
      return JSON.parse(localStorage.getItem("isLogin"));
    },
  },
};
</script>

<style lang="css" scoped>
/* 头部样式 */
.header-warp {
  height: 36px;
  background-color: #f6f6f6;
}
.header-warp .header {
  width: 1190px;
  margin: 0 auto;
}
.header-warp .header .header-left {
  float: left;
}
.header-warp .header .header-left .site {
  line-height: 36px;
}
.header-warp .header .header-left .site .iconfont {
  color: #ff6633;
}
.header-warp .header .header-left .site span {
  margin-left: 3px;
  font-weight: 900;
}
.header-warp .header .header-right {
  float: right;
}
.header-warp .header .header-right ul .xlk div {
  background: #fff;
  position: absolute;
  width: 94px;
  display: none;
  padding: 0 10px;
}
.header-warp .header .header-right ul .xlk div ul li:hover {
  font-weight: bold;
}
.header-warp .header .header-right ul li {
  float: left;
  line-height: 36px;
  text-align: center;
}
.header-warp .header .header-right ul .xlk:hover {
  background: #fff;
}
.header-warp .header .header-right ul .xlk:hover > div {
  display: block;
  z-index: 1;
}
.header-warp .header .header-right ul li a {
  display: block;
  margin: 0 15px;
}
.header-warp .header .header-right .fgx {
  background-color: #b3aeae;
  width: 2px;
  height: 16px;
  margin: 10px 11px 0 13px;
}
.header-warp .header .header-right .register {
  color: #f65d29;
}
</style>